<template>
  <a-drawer
    :title="title"
    :maskClosable="true"
    :width="drawerWidth"
    placement="right"
    :closable="true"
    @close="handleCancel"
    :visible="visible"
    style="height: 100%;overflow: auto;padding-bottom: 53px;">

    <template slot="title">
      <div style="width: 100%;">
        <span>{{ title }}</span>
        <span style="display:inline-block;width:calc(100% - 51px);padding-right:10px;text-align: right">
          <a-button @click="toggleScreen" icon="appstore" style="height:20px;width:20px;border:0px"></a-button>
        </span>
      </div>

    </template>

    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model" :rules="validatorRules">

        <a-form-model-item label="商品分类" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="productCategory">
          <a-select v-model="model.productCategory" :default-value="1" placeholder="请选择商品分类">
            <a-select-option :value="1">监测设备</a-select-option>
            <!-- <a-select-option :value="2">试纸</a-select-option> -->
            <a-select-option :value="3">服务</a-select-option>
            <a-select-option :value="4">营养餐包</a-select-option>
          </a-select>
        </a-form-model-item>

        <a-form-model-item label="商品名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="productName">
          <a-input placeholder="请输入商品名称" v-model="model.productName"/>
        </a-form-model-item>

        <a-form-model-item label="商品标签" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="productTag">
          <a-radio-group v-model="model.productTag">
            <a-radio value="热门"> 热门 </a-radio>
            <a-radio value="新品"> 新品 </a-radio>
          </a-radio-group>
        </a-form-model-item>

        <a-form-model-item label="商品规格" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input placeholder="请输入商品规格" v-model="model.productSku"/>
        </a-form-model-item>

        <a-form-model-item label="商品单位" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input placeholder="请输入商品单位" v-model="model.productUnit"/>
        </a-form-model-item>

        <a-form-model-item label="商品价格" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="productPrice">
          <a-input placeholder="请输入商品价格" v-model="model.productPrice"/>
        </a-form-model-item>

        <a-form-model-item label="商品折扣价" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="productDiscountPrice">
          <a-input placeholder="请输入商品折扣价" v-model="model.productDiscountPrice"/>
        </a-form-model-item>

        <a-form-model-item label="商品会员价" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="productVipPrice">
          <a-input placeholder="请输入商品会员价" v-model="model.productVipPrice"/>
        </a-form-model-item>

        <a-form-model-item label="商品入口图" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="productEnterPic">
          <j-image-upload class="avatar-uploader" text="上传" v-model="model.productEnterPic" :is-multiple="false"></j-image-upload>
        </a-form-model-item>

        <a-form-model-item label="商品缩略图" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="productThumb">
          <j-image-upload class="avatar-uploader" text="上传" v-model="model.productThumb" :is-multiple="false"></j-image-upload>
        </a-form-model-item>

        <a-form-model-item label="商品顶部滚动图" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="productBanner">
          <j-image-upload class="avatar-uploader" text="上传" v-model="model.productBanner" :is-multiple="true" :number="4"></j-image-upload>
        </a-form-model-item>

        <a-form-model-item label="商品详情图" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="productDetailPic">
          <j-image-upload class="avatar-uploader" text="上传" v-model="model.productDetailPic" :is-multiple="false"></j-image-upload>
        </a-form-model-item>

        <a-form-model-item v-if="model.productCategory == 3" label="商品对应服务包" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="productServiceId" :rules="[{required: model.productCategory == 3, message: '请选择对应服务包!'}]">
          <a-spin :spinning="packageLoading">
            <a-select v-model="model.productServiceId" placeholder="请选择商品对应服务包">
              <a-select-option v-for="item in packageList" :value="parseInt(item.dataId)" :key="item.dataId">{{item.packageName}}</a-select-option>
            </a-select>
          </a-spin>
        </a-form-model-item>

        <a-form-model-item label="商品排序" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input placeholder="请输入商品排序" v-model="model.productSort"/>
        </a-form-model-item>

        <a-form-model-item label="商品排序" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="productStatus">
          <a-radio-group v-model="model.productStatus" :default-value="1">
            <a-radio :value="1"> 上架 </a-radio>
            <a-radio :value="0"> 下架 </a-radio>
          </a-radio-group>
        </a-form-model-item>

      </a-form-model>
    </a-spin>


    <div class="drawer-bootom-button" v-show="!disableSubmit">
      <a-popconfirm title="确定放弃编辑？" @confirm="handleCancel" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">提交</a-button>
    </div>
  </a-drawer>
</template>

<script>
  import moment from 'moment'
  import { mapGetters } from 'vuex'
  import Vue from 'vue'
  import { getAction, postAction, deleteAction } from '@/api/manage'
  import { ACCESS_TOKEN } from "@/store/mutation-types"
  import { addUser,editUser,queryUserRole,queryall } from '@/api/api'
  import { disabledAuthFilter } from "@/utils/authFilter"
  import { duplicateCheck } from '@/api/api'

  export default {
    name: "ShopProductModal",
    components: {
    },
    data () {
      return {
      
        modalWidth:800,
        drawerWidth:700,
        modaltoggleFlag:true,
        confirmDirty: false,
        userId:"", //保存用户id
        disableSubmit:false,
        validatorRules:{
          productCategory:[{required: true, message: '请选择商品分类!'}],
          productName:[{required: true, message: '请输入商品名称!'}],
          productPrice:[{required: true, message: '请输入商品价格!'}],
          productDiscountPrice:[{required: true, message: '请输入商品折扣价!'}],
          productVipPrice:[{required: true, message: '请输入商品会员价!'}],
          productSku:[{required: true, message: '请输入商品规格!'}],
          productUnit:[{required: true, message: '请输入商品单位!'}],
          productThumb:[{required: true, message: '请上传商品缩略图!'}],
          productEnterPic:[{required: true, message: '请上传商品入口图!'}],
          productBanner:[{required: true, message: '请上传商品顶部滚动图!'}],
          productDetailPic:[{required: true, message: '请上传商品详情图!'}],
          productStatus:[{required: true, message: '请选择商品状态!'}],
        },
        title:"操作",
        visible: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        uploadLoading:false,
        confirmLoading: false,
        packageList: [],
        packageLoading: true
      }
    },
    created () {
      
    },
    computed:{
      
    },
    methods: {
      ...mapGetters(["doctorId", "orgCode"]),
      add (record) {
        this.edit(record);
      },
      edit (record) {
        let that = this;
        that.visible = true;
        //根据屏幕宽度自适应抽屉宽度
        this.resetScreenSize();
        that.model = Object.assign({orgCode: this.orgCode()}, record);
        if(record.productPrice) {
          that.model.productPrice = parseFloat(record.productFormatPrice)
        }
        if(record.productDiscountPrice) {
          that.model.productDiscountPrice = parseFloat(record.productFormatDiscountPrice)
        }
        if(record.productVipPrice) {
          that.model.productVipPrice = parseFloat(record.productFormatVipPrice)
        }
        this.handleServicePackageList()
      },
      //窗口最大化切换
      toggleScreen(){
        if(this.modaltoggleFlag){
          this.modalWidth = window.innerWidth;
        }else{
          this.modalWidth = 800;
        }
        this.modaltoggleFlag = !this.modaltoggleFlag;
      },
      // 根据屏幕变化,设置抽屉尺寸
      resetScreenSize(){
        let screenWidth = document.body.clientWidth;
        if(screenWidth < 500){
          this.drawerWidth = screenWidth;
        }else{
          this.drawerWidth = 700;
        }
      },
      close () {
        this.$emit('close');
        this.visible = false;
        this.disableSubmit = false;
        this.$refs.form.resetFields();
      },
      moment,
      handleServicePackageList() {
        getAction('107/03/1070309', {orgCode: this.orgCode()}).then(res => {
          if (res.success) {
            this.packageList = res.result
            this.packageLoading = false
          }
        }).finally(_ => {
          this.packageLoading = false
        })
      },
      handleSubmit () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            // this.model.productPrice = this.model.productPrice * 100
            // this.model.productDiscountPrice = this.model.productDiscountPrice * 100
            postAction('/shop/product/save', this.model).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              that.close();
            })
          }else{
            return false;
          }
        })
      },
      handleCancel () {
        this.close()
      }
    }
  }
</script>

<style scoped>
  .avatar-uploader > .ant-upload {
    width:204px;
    height:204px;
  }
  .ant-upload-select-picture-card i {
    font-size: 49px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }

  .ant-table-tbody .ant-table-row td{
    padding-top:10px;
    padding-bottom:10px;
  }

  .drawer-bootom-button {
    position: absolute;
    bottom: -8px;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }
</style>